<template>
  <div class="delivery-detail-wrap">
    <el-dialog
      @close="close"
      title="订单详情"
      :visible.sync="$store.state.deliveryDetail.dialogTableVisible"
    >
      <!-- 订单信息 -->
      <el-card class="delivery-card card">
        <div slot="header" class="clearfix">
          <span>订单信息</span>
        </div>
        <div>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="商品">{{
              $store.state.deliveryDetail.info.prodName
            }}</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{
              $store.state.deliveryDetail.info.orderTime
            }}</el-descriptions-item>
            <el-descriptions-item label="发货时间">{{
              $store.state.deliveryDetail.info.sendTime
                ? $store.state.deliveryDetail.info.sendTime
                : "未发货"
            }}</el-descriptions-item>
            <el-descriptions-item label="收货时间">{{
              $store.state.deliveryDetail.info.receiveTime
                ? $store.state.deliveryDetail.info.receiveTime
                : "未收货"
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
      <!-- 评分 -->
      <el-card class="Rate-card card">
        <div slot="header" class="clearfix">
          <span>评分</span>
        </div>
        <div
          v-if="
            $store.state.deliveryDetail.info.status == 20 &&
            $store.state.deliveryDetail.isEvaluation
          "
        >
          <div v-for="item in rateList" :key="item.id" class="rate-item flex">
            <div class="rate-text">
              {{ item.text }}
            </div>
            <el-rate
              v-model="item.rate"
              :colors="colors"
              class="rate-star"
            ></el-rate>
          </div>
        </div>
        <div
          v-if="
            $store.state.deliveryDetail.info.status <= 30 &&
            !$store.state.deliveryDetail.isEvaluation
          "
          class="tac"
        >
          未评分
        </div>
      </el-card>
      <!-- 评价 -->
      <el-card class="Evaluation-card card">
        <div slot="header" class="clearfix">
          <span>评价</span>
        </div>
        <div
          v-if="
            $store.state.deliveryDetail.info.status == 20 &&
            $store.state.deliveryDetail.isEvaluation
          "
        >
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="144"
            show-word-limit
            class="textarea-inp"
          >
          </el-input>
        </div>
        <div
          v-if="
            $store.state.deliveryDetail.info.status <= 30 &&
            !$store.state.deliveryDetail.isEvaluation
          "
          class="tac"
        >
          未评论
        </div>
      </el-card>
      <div class="btn-wrap flex">
        <el-button type="primary" @click="submit()">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getEvaluateApi } from "@/http/api.js";
export default {
  data() {
    return {
      rateList: [
        { id: 0, rate: null, text: "描述相符" },
        { id: 1, rate: null, text: "物流速度" },
        { id: 2, rate: null, text: "服务质量" },
      ],
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      textarea: "",
    };
  },
  methods: {
    close() {
      this.rateList = [
        { id: 0, rate: null, text: "描述相符" },
        { id: 1, rate: null, text: "物流速度" },
        { id: 2, rate: null, text: "服务质量" },
      ];
      this.colors = ["#99A9BF", "#F7BA2A", "#FF9900"];
      this.textarea = "";
    },
    submit() {
      this.getEvaluate();
    },
    async getEvaluate() {
      let data = {
        serialNo: this.$store.state.deliveryDetail.info.serialNo,
        prodConformityPoint: this.rateList[0].rate,
        logisticsSpeedPoint: this.rateList[1].rate,
        serviceQualityPoint: this.rateList[2].rate,
        comment: this.textarea,
      };
      console.log(data);
      let res = await getEvaluateApi(data);
      console.log(res);
      try {
      } catch (e) {
        this.$message({
          message: "评价成功",
          type: "success",
        });
        this.$emit("reSend");
        this.$store.commit("deliveryDetail/changeDialogShow", false);
      }
    },
  },
};
</script>
 
<style lang="less" scoped>
.delivery-detail-wrap {
  .card {
    margin-bottom: 20px;
  }
  .rate-item {
    border-bottom: 1px solid #ededed;
    padding: 15px;
    justify-content: space-between;
    align-items: center;
    &:last-child {
      border: 0;
    }
  }
  .rate-star {
    padding-right: 10px;
  }
  /deep/ .el-textarea__inner {
    resize: none;
    min-height: 80px !important;
    max-height: 80px;
  }
  .btn-wrap {
    justify-content: flex-end;
  }
}
</style>